<template>
    <div class="activity-index">
    	<el-form :inline="true" >
          <el-form-item label="用户名">
            <el-input  placeholder="请输入用户名" v-model="nickname"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input  placeholder="请输入手机号" v-model="phone"></el-input>
          </el-form-item>
          <el-form-item label="用户类型">
						<!-- 0拉黑(禁止登陆) 1正常 2管理员 -->
            <el-select  placeholder="请输选择用户类型" v-model="status">
							<el-option label="请输选择用户类型" value=""></el-option>
              <el-option label="正常" value="1"></el-option>
							<el-option label="管理员" value="2"></el-option>
              <el-option label="拉黑" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="query">
              <el-button type="primary" @click="queryUsers">查询</el-button>
        </div>
        <el-table :data="userList" style="width: 100%">
            <el-table-column label="#" 
                             type="index"
                            :index="1">
            </el-table-column>
            <el-table-column label="昵称" prop="nickname" width="200">
              <template slot-scope="scope" align="center">
                <div class="info">
                  <img :src="scope.row.headimg" class="img">
                  <div>{{scope.row.nickname}}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="手机号码" prop="phone">
            </el-table-column>
            <el-table-column label="状态" prop="statusStr">
            </el-table-column>
            <el-table-column label="创建时间" prop="createDate">
            </el-table-column>
            <el-table-column label="操作" prop="desc" width="150">
                <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="primary"
                      @click="userDetail(scope.$index, scope.row)">查看</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="freeze(scope.$index, scope.row,0)"
											v-if="scope.row.status==1">拉黑</el-button>
										<el-button
											size="mini"
											type="success"
											@click="freeze(scope.$index, scope.row,1)"
											v-if="scope.row.status==0">恢复</el-button>
											<!-- 0拉黑(禁止登陆) 1正常 2管理员 -->
                </template>
            </el-table-column>
        </el-table>

        <div class="pages">
            <el-pagination
              background
              @size-change="pageSizeChange"
              @current-change="pageCurrentChange"
              :current-page="pageNum"
              :page-sizes="[10, 50, 100, 200]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
// @ 是 /src 的别名
export default {
    name: 'NoticeComponent',
    props: {

    },
    data() {
        return {
            userList: [],
						pageNum:1,
						pageSize:10,
						nickname:'',
						phone: '',
						status:'',
						total:0
        }
    },
		created:function(){
			this._getUserList()
		},
    methods: {
			_getUserList() {
				this.axios.get('/admin/listUser?pageNum='+this.pageNum+'&pageSize='+this.pageSize+'&status='+this.status+'&nickname='+this.nickname+'&phone='+this.phone)
				.then((res)=>{
					let data = res.data.data
					this.userList = data.list
					this.total = data.total
					console.log(data)
				})
			},
      userDetail(index,obj) {
        this.$router.push("/user/detail/"+obj.openid)
      },
			pageSizeChange(pageSize) {
				this.pageSize = pageSize
				this._getUserList()
			},
			pageCurrentChange(pageNum) {
				this.pageNum = pageNum
				this._getUserList()
			},
			queryUsers() {
				this.pageNum = 1
				this._getUserList()
			},
			freeze(index,obj,status) {
				this.$notify({
          title: '操作成功',
          message: '用户状态更改成功',
          type: 'success'
        });
				// event.target.innerHTML = "已更改"
				obj.status = status
				this.axios.get("/admin/freeze?openId="+obj.openid+'&status='+status)
			}
    }
}
</script>
<style scoped lang="styl">
.info
  display flex
  justify-conent center
  flex-direction column

 .info .img{
  width: 80px;
  height: 80px;
 }
.query
    display flex
    justify-content flex-end
    margin 0 58px 20px 0 
.pages
    display flex
    justify-content flex-end
    margin-top 20px
</style>